import React,{useState} from 'react'
import './Tweetbox.scss'
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import { supabase } from "../../../utils/connection";
function Tweetbox() {
  const [tweetmessage,settweetmessage] = useState('')
  const [tweetimage,settweetimage] = useState('')
  function sendtweet(e){
    e.preventDefault();
    (async ()=>{
      const { data } = await supabase.from('posts')
      .insert([{ displayname:'游客',username:'visitors',verified:true,text:tweetmessage,image:tweetimage,avatar:'http://tva3.sinaimg.cn/large/006APoFYjw1f9j9k5nothj30dc0dc74l.jpg'}])   
    })()
  }
  return (
    <div className='Tweetbox'>
      <form onSubmit={sendtweet}>
        <div className='Tweetbox_input'>
          <Avatar src='http://tva3.sinaimg.cn/large/ceeb653ejw1fbm3ro3cuhj20c00bkwf5.jpg'/>
          <input type="text" placeholder='你在干什么' onChange={(e)=> settweetmessage(e.target.value)}/>
        </div>
        <input type="text" className='Tweetbox_imageinput' placeholder='输入图片地址' 
          onChange={(e)=> settweetimage(e.target.value)}/>
        <Button className='Tweetbox_tweetbutton' type='submit'>发布</Button>
      </form>
    </div>
  )
}

export default Tweetbox